HTMLify
style.css
Views: 17 | Author: cody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(to right, #917173, #2a3b36, #432c52); height: 100vh; display: flex; justify-content: center; align-items: center; } .loader { position: relative; display: flex; justify-content: center; align-items: center; } .loader::before { content: ""; background: rgba(255, 255, 255, 0); backdrop-filter: blur(8px); position: absolute; width: 140px; height: 55px; z-index: 20; border-radius: 0 0 10px 10px; border: 1px solid rgba(255, 255, 255, 0.274); border-top: none; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.082); animation: anim2 2s infinite; } .loader div { background: rgb(228, 228, 228); border-radius: 50%; width: 25px; height: 25px; z-index: -1; animation: anim 2s infinite linear; animation-delay: calc(-0.3s * var(--i)); transform: translateY(5px); margin: 0.2em; } @keyframes anim { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-65px); } } @keyframes anim2 { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } } |